<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="60%"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form :inline="true" @submit.prevent>
          <el-form-item>
            <el-button type="primary" @click="handleAdd()">
              添加客服关键字
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支*持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template #default="{ row }">
          <span v-if="item.prop == 'msg_type'">
            {{ msgTypeFun(row[item.prop]) }}
          </span>
          <div v-else-if="item.prop == 'content'">
            <div v-if="row.msg_type == 'link' || row.msg_type == 'miniprogram'">
              <vab-card class="icon-panel" shadow="hover">
                <div class="card-title">
                  {{ row.content.title }}
                </div>
                <div class="card-content">
                  <div v-if="row.msg_type == 'link'" class="card-desc">
                    {{ row.content.desc }}
                  </div>
                  <vab-icon
                    v-if="row.msg_type == 'miniprogram'"
                    icon="mini-program-line"
                    style="color: #1890ff; font-size: 30px; margin-top: 15px"
                  />
                  <div class="demo-image__preview">
                    <el-image
                      :lazy="true"
                      preview-teleported
                      :src="row.media_url"
                    />
                  </div>
                </div>
              </vab-card>
            </div>
            <div v-else-if="row.msg_type == 'image'">
              <el-image :lazy="true" preview-teleported :src="row.media_url" />
            </div>
            <div v-else>{{ row[item.prop] }}</div>
          </div>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleKeyWord(row)"
          >
            编辑
          </el-button>
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <EditKeyWordRef ref="editKeyWordRef" @fetch-data="getWeComKeyWordData" />
  </el-dialog>
</template>

<script>
  import { getWeComKeyWord, getWeComType, doWeComKeyWordDel } from '@/api/enterpriseWeChat/weCom'
  export default defineComponent({
    name: 'TableKWListEdit',
    components: {
      EditKeyWordRef: defineAsyncComponent(() => import('./TableKeyWordEdit')),
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        editKeyWordRef: null,
        title: '',
        columns: [
          {
            label: '消息类型',
            prop: 'msg_type',
            minWidth: '60',
          },
          {
            label: '关键字',
            prop: 'keyword',
            minWidth: '70',
          },
          {
            label: '消息内容',
            prop: 'content',
            minWidth: '95',
          },
        ],
        corp_id: '',
        open_kfid: '',
        list: [],
        weComType: [],
        border: true,
        height: 400,
        stripe: false,
        listLoading: true,
        dialogFormVisible: false,
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const showEdit = async (corp_id, open_kfid) => {
        state.title = '客服关键字列表'
        state.corp_id = corp_id
        state.open_kfid = open_kfid
        getWeComTypeData()
        getWeComKeyWordData()
        state.dialogFormVisible = true
      }
      const getWeComTypeData = async () => {
        const { data } = await getWeComType()
        state.weComType = data
      }
      const getWeComKeyWordData = async () => {
        state.listLoading = true
        const { data } = await getWeComKeyWord({
          open_kfid: state.open_kfid,
        })
        state.list = data
        state.listLoading = false
      }
      const msgTypeFun = (row) => {
        let str = ''
        state.weComType.map((item) => {
          if (item.id == row) {
            str = item.label
          }
        })
        return str
      }
      const handleAdd = () => {
        state['editKeyWordRef'].showEdit(
          state.weComType,
          state.corp_id,
          state.open_kfid
        )
      }
      const handleKeyWord = (row) => {
        state['editKeyWordRef'].showEdit(
          state.weComType,
          state.corp_id,
          state.open_kfid,
          row
        )
      }
      const handleDelete = (row) => {
        console.log(row)
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doWeComKeyWordDel({
              id: row.id,
            })
            $baseMessage(message, 'success', 'vab-hey-message-success')
            await getWeComKeyWordData()
          })
        }
      }
      const close = () => {
        state.list = []
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        finallyColumns,
        msgTypeFun,
        handleAdd,
        handleDelete,
        handleKeyWord,
        getWeComKeyWordData,
      }
    },
  })
</script>
<style lang="scss" scoped>
  :deep() {
    .el-card__body {
      padding: 5px 10px !important;
    }

    .el-card {
      margin-bottom: 0 !important;
    }
  }

  .icon-panel {
    .card-title {
      font-size: 16px;
      text-align: left;
    }
    .card-content {
      display: flex;
      justify-content: space-between;
    }
    .card-desc {
      text-align: left;
      color: #b2b2b2;
    }
  }
</style>
